<template>
    <div :style="{marginTop:$store.state.navbarHeight+12+'rpx'}">
        <Navbar title="مارس كىنوخانىسى" :showIcon="true" bgColor="bg-gradual-2" />
        <div class="wrap" :style="{marginTop:customBar()*2+12+'rpx'}">
            <div class="draw">
                <painter :palette="list" @imgOK="onImgOK" />
            </div>
            <div class="btn" v-if="showBtn" @click="saveImg">رەسىمنى ساقلاش</div>
        </div>
        <i-toast id="toast" />
    </div>
</template>
<script>
import { mapGetters } from "vuex";
import { $Toast } from "@/utils/index";
import Navbar from "@/components/Navbar.vue";
import Card from "./card";
// let card = new Card().palette();
export default {
    components: {
        Navbar
    },
    data() {
        return {
            drawing: [],
            list: null,
            showBtn: false,
            imgPath: ""
        };
    },
    mounted() {},
    onLoad: function() {
        let posterInfo = this.$store.state.posterInfo;
        let userInfo = wx.getStorageSync("userInfo");
        this.list = new Card({ ...posterInfo, userInfo }).palette();
        wx.showLoading();
    },
    methods: {
        ...mapGetters(["customBar", "statusBar", "clientRect"]),
        onImgOK(e) {
            wx.hideLoading();
            this.showBtn = true;
            this.imgPath = e.detail.path;
        },
        saveImg() {
            wx.saveImageToPhotosAlbum({
                filePath: this.imgPath, //图片文件路径，可以是临时文件路径也可以是永久文件路径，不支持网络图片路径,
                success: res => {
                    $Toast({
                        content: "رەسىم ساقلاندى",
                        icon: "success"
                    });
                },
                fail: () => {
                    $Toast({
                        content: "مەغلۇپ بولدى",
                        icon: "success"
                    });
                },
                complete: () => {}
            });
        }
    },
    onShow: function() {},
    onShareAppMessage() {
        return {
            title: "مارس كىنوخانىسى",
            path: `/pages/Home/Home`,
            success: res => {
                console.log("share-success");
            },
            fail: () => {
                console.log("share-fail");
            },
            complete: () => {}
        };
    }
};
</script>

<style lang="scss" scoped>
.wrap {
    border: 1px solid transparent;
    .draw {
        display: flex;
        justify-content: center;
        margin-top: 20rpx;
    }
}
.btn {
    height: 70rpx;
    width: 85%;
    margin: 0 auto;
    margin-top: 30rpx;
    text-align: center;
    line-height: 70rpx;
    background: linear-gradient(
        to right bottom,
        rgb(255, 133, 27),
        rgb(255, 25, 181)
    );
    border-radius: 17rpx;
    color: #fff;
}
</style>